<html>

<head>
  <script src="https://unpkg.com/react@16.12.0/umd/react.production.min.js" type="text/javascript"></script>
  <script src="https://unpkg.com/react-dom@16.12.0/umd/react-dom.production.min.js" type="text/javascript"></script>
  <script src="https://unpkg.com/jsonx/dist/index.umd.js" type="text/javascript"></script>
</head>

<body>
  <div id="main"></div>
  <div id="someDiv"></div>
  <script>
    const context = {
      debug: true,
      props: {
        writeRandom: function (e) {
          document.querySelector('#someDiv').innerHTML = Math.random() + ' predefined';
        },
      }
    }
    const boundJsonxRender = jsonx.jsonxRender.bind(context);
    const JXM = {
      component: 'div',
      debug: true,
      props: {
        key: 0,
      },
      children: [{
          component: 'h1',
          children: '__functionProps predefined examples',
        },
        {
          component: 'button',
          children: '__functionProps predefined',
          __functionProps: {
            onClick: 'func:this.props.writeRandom'
          },
        },
        {
          component: 'button',
          children: '__functionProps custom',
          props: {
            testVal: 'test val'
          },
          __functionargs: {
            onClick: ['testVal'],
          },
          __inline: {
            onClick: `
              // console.log('function arguments',arguments); 
              document.querySelector('#someDiv').innerHTML=Math.random()+' custom'; `
          },
          __functionProps: {
            onClick: 'func:inline.onClick'
          },
        },
      ],
    };

    boundJsonxRender({
      jsonx: JXM,
      querySelector: '#main',
    });
  </script>
</body>

</html>